<template>
  <div id="echarts_bar"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    draw() {
      let option = {
        title: {
          subtext: "优秀寝室占比：%",
          top:-10
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = ""; //声明一个变量用来存储数据
            const [a, b] = params;
            // console.log(params);
            var a1 = `${a.seriesName}: ${a.value > 0 ? a.value : -a.value}`;
            var b1 = `${b.seriesName}: ${b.value > 0 ? b.value : -b.value}`;
            str = a1 + "</br>" + b1;
            return str;
          },
        },
        legend: {
          //位置需要与color对应，方可得到相应颜色
          data: ["本周", "上周"],
        },
        grid: {
          top: "10%",
          bottom: "8%",
          right: "0%",
          left: "0%",
        },
        xAxis: [
          {
            type: "category",
            data: ["计科", "电信", "财经", "数统", "工商","美术","公管","土木","机械","传媒","教育"],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: false,
              formatter: function (v) {
                return v > 0 ? v : -v;
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "本周",
            type: "bar",
            stack: "总量",
            data: [19.7, 34.7, 17.6, 8.1, 19.9,19.7, 34.7, 17.6, 8.1, 19.9,34.7],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#47b5a4",
                },
                {
                  offset: 1,
                  color: "#3f82c6",
                },
              ]),
            },
            barWidth: "10%",
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "上周",
            type: "bar",
            stack: "总量",
            data: [-37.6, -31.9, -11.4, -6.6, -12.9,-37.6, -31.9, -11.4, -6.6, -12.9,-37.6],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#9345fb",
                },
                {
                  offset: 1,
                  color: "#f192b4",
                },
              ]),
            },
            barWidth: "10%",
            barGap: "40%",
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      };
      let mychart = this.$echarts.init(document.getElementById("echarts_bar"));
      mychart.setOption(option);
    },
  },
  mounted() {
    this.draw();
  },
};
</script>

<style>
#echarts_bar {
  width: 100%;
  height: 300px;
}
</style>